<!-- 登录页登录框 -->
<script setup>
import { reactive, ref } from 'vue';
import { ElMessage } from 'element-plus';
import { login_axios } from '../../services/index';
import { useRouter } from 'vue-router';
import { useAdminStore } from '../../stores/admin-store';

const formData = reactive({
   name: '',
   password: ''
})
const rules = reactive({
   name: [
      {
         required: true,
         message: '请输入用户名',
         // 验证触发的方式：blur移出焦点,change每次更改都会触发
         trigger: 'blur'
      },
      {
         //验证
         validator: (rules, value, callback) => {
            if (value.length < 4) {
               callback(new Error('用户名长度在4-10个字符之内'))
            }
            else if (value.length > 10) {
               callback(new Error('用户名长度在4-10个字符之内'))
            }
            else {
               callback()
            }
         },
         trigger: 'blur'
      }
   ],
   password: [
      {
         required: true,
         message: '请输入用户密码',
         trigger: 'blur'
      }
   ]
})
const formRef = ref();
const Router = useRouter();
const login = () => {
   useAdminStore().adminname = formData.name
   console.log(formRef.value);
   formRef.value.validate((valid, fields) => {
      if (valid) {
         console.log('验证通过');
         console.log(formData.name, formData.password);
         login_axios({
            adminname: formData.name,
            password: formData.password
         }).then((result) => {
            if (result.data.code === '200') {
               ElMessage.success('成功登陆');
               localStorage.setItem('token', result.data.data.token)
               localStorage.setItem('adminname', result.data.data.adminname)
               console.log(Router);
               Router.push('/HomePage/Textarea');
            }
         })
      } else {
         console.log('验证不通过');
      }
   })
}
</script>
<template>
   <el-card shadow="always" class="form-container dark">
      <!-- :rules="rules"绑定rules验证规则 -->
      <el-form :model="formData" :rules="rules" ref="formRef">
         <el-form-item prop="name" class="form-item">
            <!-- 绑定响应式数据:当前更改为formData.name -->
            <el-input v-model="formData.name" placeholder="Please input">
               <!-- #prefix内部内容作为前缀，#suffix内部内容作为后缀 -->
               <template #prefix>
                  <el-icon>
                     <User />
                  </el-icon>
               </template>
            </el-input>
         </el-form-item>

         <el-form-item prop="password" class="form-item">
            <!-- 绑定响应式数据:当前更改为formData.pass -->
            <el-input v-model="formData.password" type="password" placeholder="Please input">
               <template #prefix>
                  <el-icon>
                     <Lock />
                  </el-icon>
               </template>
            </el-input>
         </el-form-item>

         <el-form-item class="form-item">
            <el-button @click="login">登录</el-button>
            <el-button @click="login">注册</el-button>
         </el-form-item>
      </el-form>
   </el-card>
</template>
<style scoped>
.form-container {
   /* max-width: 600px; */
   min-width: 500px;
   min-height: 300px;
   margin: auto;
   background-color: rgb(78, 51, 186);
}

.form-item {
   margin: 40px;
}
</style>